<script setup lang="ts">
import { useI18n } from "vue-i18n";
const { t } = useI18n();
definePageMeta({
  layout: "login",
  title: "注册",
  name: "register",
  i18n: "menu.register",
});
const router = useRouter();
const username = ref("");
const password = ref("");
const password2 = ref("");
const formRef = ref(null);

const showPassword = ref(false); // 控制密码是否可见
const showPassword2 = ref(false); // 控制密码是否可见
const goLogin = () => {
  router.push("/login");
};
const onSubmit = (values: any) => {
  console.log("submit", values);
};
const resetForm = () => {
  username.value = "";
  password.value = "";
  password2.value = "";
  // if (formRef.value) formRef.value.reset();
};
</script>

<template>
  <div pt-15 text-center text-16 text-dark dark:text-white>
    <img src="/img/logo.png" alt="logo" class="w-60 mx-auto mt-26" />
    <div class="color-#9abfff text-12 mt-10">Noblebet.site</div>
    <van-form ref="formRef" @submit="onSubmit" class="mt-30">
      <van-cell-group inset>
        <van-field v-model="username" name="username" :border="false" :placeholder="t('register_page.username')"
          :rules="[{ required: true, message: t('register_page.username') }]">
          <template #left-icon>
            <img src="/img/username.png" alt="" class="w-20 mr-10" />
          </template>
        </van-field>
        <van-field v-model="password" :type="showPassword?'text':'password'" name="password"
          :right-icon="showPassword ? 'eye-o' : 'closed-eye'" @click-right-icon="showPassword = !showPassword"
          :border="false" :placeholder="t('register_page.password')"
          :rules="[{ required: true, message: t('register_page.password') }]">
          <template #left-icon>
            <img src="/img/lock.png" alt="" class="w-20 mr-10" />
          </template>
        </van-field>
        <van-field v-model="password2" :type="showPassword2 ? 'text' : 'password'" :border="false"
          :right-icon="showPassword2 ? 'eye-o' : 'closed-eye'" @click-right-icon="showPassword2 = !showPassword2"
          name="password2" :placeholder="t('register_page.password2')"
          :rules="[{ required: true, message: t('register_page.password2') }]">
          <template #left-icon>
            <img src="/img/lock.png" alt="" class="w-20 mr-10" />
          </template>
        </van-field>
      </van-cell-group>

      <div class=" mt-20">
        <van-button class="register" native-type="submit"> {{ t("register_page.register") }}</van-button>
        <van-button class="reset" @click="resetForm"> {{ t("register_page.reset") }}</van-button>
      </div>
      <div class="mt-20">
        <span class="color-#aab2bb "> {{ t("register_page.hasCount") }}</span>
        <span class="text-primary underline" @click="goLogin">
          {{ t("register_page.goLogin") }}</span>
      </div>
    </van-form>
  </div>
</template>
<style scoped lang="css">
::v-deep .van-cell {
  background: #3e4d6e;
  color: #aab2bb;
  margin: 10px 0;
  padding: 12px 16px;
  border-radius: 10px;
  border: 2px solid rgba(159, 168, 188, 0.3);
  display: flex;
  align-items: center;
}

::v-deep .van-cell-group--inset {
  background: transparent;
}

::v-deep .van-button--default {
  border: none;
}

::v-deep .van-field__control {
  color: #ffffff;
}

.register {
  width: 100%;
  height: 49px;
  background: url('/img/login_btn.png');
  background-size: 100% 100%;
  color: #bfecff;
  line-height: 49px;
}

.reset {
  width: 100%;
  height: 49px;
  background: #363940;
  border-radius: 10px;
  color: #929299;
  line-height: 49px;
  margin-top: 15px;

}
</style>
